<template>
  <div>
    <div>
      <div class="index-head">
        <div class="index-head-box">
          <!-- <img
          src="https://zhjs-oss.oss-cn-shanghai.aliyuncs.com/zhcc/jiazhang/1223.png"
          class="index-head-logo"
        /> -->
          <div class="index-head-menu">
            <div @click="changeMenu(key)" v-for="(item, key) in menu" :key="key"
              :class="menu_index == key ? 'index-head-link active' : 'index-head-link'">
              {{ item.name }}
            </div>
            <!--                    <div class="guan_wang" @click="goLink">-->
            <!--                        <img src="@/assets/img/new123.png" class="guan_wang_img"/>-->
            <!--                        众安官网-->
            <!--                    </div>-->
            <div class="index-head-link" v-if="$store.state.loginState == false" @click="toLogin()">
              登录
            </div>
            <div class="index-head-link-info" v-else>
              <div style="
                width: 100%;
                display: flex;
                justify-content: flex-end;
                align-items: center;
              ">
                <span v-if="!$store.state.userInfo.authentication" @click="real" style="color: red; margin-right: 10px">未实名</span>
                <span v-else style="margin-right: 10px">
                  {{ $store.state.userInfo.user_name }}
                </span>
                <div style="padding: 0px 2px 0px 2px">
                  <span style="color: #5180f9" @click="changepwd()">[修改密码]</span>
                </div>
                <span style="color: #5180f9" @click="outLogin()">[退出]</span>
              </div>
            </div>
            <div style="width: 60px; height: 20px; text-align: center; padding: 0 5px">
              <!--                        @click="toNotice()"-->
              <!--                        <img src="https://jy-club.oss-cn-shanghai.aliyuncs.com//iamges/icon/notice.png"-->
              <!--                             style="height: 100%" alt="">-->
            </div>
            <!--          底部-->
            <div class="index-head-menu-line" :style="lineStyle()"></div>
          </div>
        </div>
        <div class="customer-tel-box">
          <div class="customer-icon-box">
            <div class="icon-img-box">
              <img src="../assets/img/Frame-3.png" alt="电话" />
            </div>
            <div class="icon-text-box">电话咨询</div>
          </div>
          <div class="customer-text-box">400-6598-168</div>
        </div>
        <div class="customer-wechat-box">
          <div class="customer-icon-box">
            <div class="icon-img-box">
              <img src="../assets/img/Frame-4.png" alt="微信" />
            </div>
            <div class="icon-text-box">微信咨询</div>
          </div>
          <div class="wechat-img-box">
            <img style="width: 200px; height: 200px" src="@/assets/img/erweima.png" alt="微信" />
          </div>
        </div>
      </div>
      <!--    内容路由-->
      <div class="index-body">
        <router-view></router-view>
      </div>
      <!--    底部-->
      <div class="index-footer" v-if="show_footer" style="padding-bottom: 20px">
        <div class="index-footer-top-box">
          <div class="index-footer-top">
            <img src="../assets/img/Frame-3.png" class="index-footer-icon" />
            <div class="index-footer-info">
              <div class="index-footer-info-title">服务热线</div>
              <div>400-659-8168</div>
            </div>
            <img style="margin-left: 120px" src="../assets/img/email.png" class="index-footer-icon" />
            <div class="index-footer-info">
              <div class="index-footer-info-title">邮箱地址</div>
              <div>dongjiabaobx@163.com</div>
            </div>
          </div>
        </div>
        <div class="index-footer-bottom">
          <div class="index-footer-bottom-text">
            <span>©2024 上海明大保险经纪有限公司 All Rights Reserved.
              <a href="https://beian.miit.gov.cn/" target="“_blank”" style="margin-left: 20px">
                <el-button type="text" style="color: #ffffff">
                  <span style="font-size: 13px">沪ICP备15000308号-2</span>
                </el-button>
              </a>
              <span style="margin-left: 20px"> 沪公安网备 31011502018755号 </span>
            </span>
            <span style="margin-left: 50px;cursor: pointer;" @click="pushUrl">
              安徽赛高科技提供技术支持

            </span>
          </div>
        </div>
      </div>

      <el-dialog title="修改昵称" :visible.sync="nameUpDataDia" width="20%" center>
        <el-form size="mini">
          <el-form-item label="昵称">
            <el-input placeholder="请输入昵称" v-model="user_name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button class="com-btn" size="mini" @click="nameUpDataDiaSu">确定修改</el-button>
        </span>
      </el-dialog>
    </div>
    <div>
      <el-dialog title="账号实名" :visible.sync="realVisible" width="20%" center @close="dialogClose">
        <div class="login-card" style="padding: 0">
          <!--          <div class="login-title">账号注册</div>-->
          <div class="login-form">
            <div class="login-form-content">
              <img src="@/assets/img/user_name.png" class="login-icon" />
              <el-input v-model="param.name" placeholder="请输入姓名" class="login-input"></el-input>
            </div>
          </div>
          <div class="login-form">
            <div class="login-form-content">
              <img src="@/assets/img/id_card.png" class="login-icon" />
              <el-input v-model="param.id_card" placeholder="请输入身份证" class="login-input"></el-input>
            </div>
          </div>
          <div class="login-form">
            <div class="login-form-content">
              <img src="@/assets/img/Frame.png" class="login-icon" />
              <el-input v-model="param.mobile" placeholder="请输入手机号码" class="login-input"></el-input>
            </div>
          </div>

          <div class="login-btn" @click="realSubmit">立即实名</div>
        </div>
      </el-dialog>
    </div>
    <!-- <div v-if="isH5">
      <login_H5></login_H5>
    </div> -->
  </div>
</template>

<script>

import * as rrweb from "rrweb";
var arrList = [];
export default {

  data() {
    return {
      nameUpDataDia: false,
      menu: [
        {
          name: "首页",
          url: "/index/index/index",
        },
        {
          name: "我的订单",
          url: "/index/index/index",
        },
        {
          name: "快速理赔",
          url: "/index/index/index",
        },
      ],
      menu_index: 0,
      show_footer: true,
      user_name: "",
      userInfo: {
        authentication: "",
        user_name: "",
      },
      realVisible: false,
      stopFun: () => { },
      param: {
        name: "",
        id_card: "",
        mobile: "",
        mark: [],
      },
    };
  },
  mounted() {

    if (this.$route.path == "/index/login/login") this.show_footer = false;
    this.checkLogin();
    console.log(33333333333333);
    this.getInfo()

    this.getUserName();


  },
  methods: {
    dialogClose() {
      this.stopFun();
      arrList = [];
    },
    //实名
    real() {
      this.realVisible = true;
      this.player();
    },
    //录制视频
    player() {
      console.log(arrList);
      this.stopFun = rrweb.record({
        emit(event) {
          arrList.push(event);
        },
      });
    },
    //确认实名
    realSubmit() {
      this.param.mark = arrList;
      this.ajaxs("check/mobileThree", {
        data: this.param,
        success: (res) => {
          if (res.code) {
            this.toast(res.code, res.msg);
            this.realVisible = false;
             

            this.getInfo();
          } else {
            this.toast(res.code, res.msg);
          }
        },
      });
    },
    getInfo() {
      this.ajaxs("user/getInfo", {
        success: (res) => {
          if (res.code) {
 
            this.$store.commit("updateUserInfo", res.msg);
            // this.userInfo = this.$store.state.userInfo;
            console.log(this.$store.state.userInfo);
            console.log("获取用户信息");

            this.$forceUpdate();
          }

        },
      });
    },
    pushUrl() {
      window.open('https://www.secosoft.cn/');
    },
    nameUpDataDiaSu() {
      this.ajaxs("user/editInfo", {
        data: {
          user_name: this.user_name,
        },
        success: (res) => {
          this.nameUpDataDia = false;
          if (res.code) {
            this.$message({
              message: res.msg,
              type: "success",
            });
          } else {
            this.$message.error(res.msg);
          }
          this.getUserName();
        },
      });
    },
    upDataName() {
      this.user_name = this.$store.state.user_name;
      this.nameUpDataDia = true;
    },
    getUserName() {
      this.ajaxs("index/getInfo", {
        success: (res) => {
          if (res.msg) {
            if (res.msg.user_name) {
              this.$store.commit("updateName", res.msg.user_name);
            } else {
              this.$store.commit("updateName", "暂无用户名");
            }
          }
        },
      });
    },
    //检测登陆
    checkLogin() {
      this.ajaxs("index/check", {
        success: (res) => {
          if (res.msg == "error") {
            this.$store.commit("updateMobile", "");
            this.$store.commit("updateLoagin", false);
          } else {
            this.$store.commit("updateMobile", res.msg);
            this.$store.commit("updateLoagin", true);
          }
        },
      });
    },
    changeMenu(key) {
      this.menu_index = key;
      if (this.menu_index == 0) {
        this.$router.push({
          path: "/index/index/index",
        });
      }
      if (this.menu_index == 1) {
        this.$router.push({
          path: "/index/order/list",
        });
      }
      if (this.menu_index == 2) {
        this.$router.push({
          path: "/index/pei/index",
        });
      }
    },
    changepwd() {
      this.$router.push({
        path: "/index/login/forgot",
      });
    },
    toNotice() {
      this.$router.push({
        path: "/index/index/notice",
      });
    },
    lineStyle() {
      if (this.menu_index == 0) {
        return this.$store.state.loginState == false
          ? {
            right: (3 - this.menu_index) * 100 + 95 + "px",
            width: 30 + "px",
          }
          : {
            right: (3 - this.menu_index) * 100 + 290 + "px",
            width: 30 + "px",
          };
      } else {
        return this.$store.state.loginState == false
          ? {
            right: (3 - this.menu_index) * 100 + 80 + "px",
          }
          : {
            right: (3 - this.menu_index) * 100 + 274 + "px",
          };
      }
    },
    outLogin() {
      this.ajaxs("login/outLogin", {
        success: (res) => {
          this.toast(res.code, "退出成功");
          this.$store.commit("updateMobile", "");
          this.$store.commit("updateLoagin", false);
          this.$store.commit("updateName", "");
          var viewport = document.querySelector('meta[name="viewport"]');
          // 判断是否为手机环境
          this.isMobile = /Android|webOS|iPhone|iPod|BlackBerry|iPad|Windows Phone/i.test(navigator.userAgent);
          if (this.isMobile) {
            viewport.setAttribute('content', 'width=device-width,' +
              'initial-scale=1.0' +
              'user-scalable=yes,shrink-to-fit=no');
            this.$router.push('/index/login/login_h5')
          } else {
            viewport.setAttribute('content', 'width=device-width,' +
              'initial-scale=0.1' +
              'user-scalable=yes,shrink-to-fit=no');
            this.$router.push({
              path: "/index/login/login",
            });
          }

        },
      });
    },
    toLogin() {
      this.$router.push({
        path: "/index/login/login",
      });
    },
    goLink() {
      window.open("http://index.dongjbao.com/");
    },
  },
  watch: {
    $route(v, o) {
      // window.document.title="东家保"
      console.log(v, o);
      if (v.path == "/index/login/login") {
        this.show_footer = false;
      }
      if (v.path == "/index/index/index") {
        this.show_footer = true;
      }
      var str = v.path;
      if (str.indexOf("/index/index") != -1) {
        this.menu_index = 0;
      }
      if (str.indexOf("/index/order") != -1) {
        this.menu_index = 1;
      }
      if (str.indexOf("/index/pei") != -1) {
        this.menu_index = 2;
      }
    },
  },
};
</script>

<style scoped>
@import "../assets/css/index.css";
@import "../assets/css/login/login.css";
</style>
